import React, { useState } from 'react';
import { Stable, for_obj, WaitUmd, get_num, useCmd, urlSpc, obj_bool, cline, loc_str, MsgInfo, obj_str, useWidth, MainView, GridTable, loc } from 'sui';
import { filterE, getData} from './cmd';
import { get_f, sumSpc, filterN, filterG } from '../cmd';
import { NoData, SumN, Title } from '../ctl';
import { Echart } from '../echart';

const XbarView = ({ cfg }) => {
    const [width] = useWidth(null, 600);
    const [main, setMain] = useState(null);
    const [cur_opt, curOpt] = useState();
    const umd = useCmd(null, "xbar");

    const hopt = (v) => {
        umd.startWait();

        let change = false;
        for_obj(v, (k, v) => {
            if (cur_opt[k] === v) {
                return;
            }

            change = true;
        });

        if (change) {
            curOpt(v);
        }

        umd.endWait();
    };

    const hfind = (value, opt) => {
        const cmd = {
            line: cline(),
            tab: obj_str(cfg, "dsn"),
            wsn: obj_str(cfg, "wsn"),
            obj: obj_str(cfg, "fsn"),
            row: get_num(cfg, "num"),
            start: loc_str(value["t_start"]),
            end: loc_str(value["t_end"]),
        };

        const usl = get_f(cfg, "usl");
        if (!isNaN(usl)) {
            cmd["usl"] = usl;
        }

        const lsl = get_f(cfg, "lsl");
        if (!isNaN(lsl)) {
            cmd["lsl"] = lsl;
        }

        const sl = get_f(cfg, "sl");
        if (!isNaN(sl)) {
            cmd["sl"] = sl;
        }

        umd.startWait();
        curOpt(opt);
        urlSpc(umd.endWait, "xbar", cmd, r => setMain(r), e => setMain({err: loc("product_39")}));
    };

    const Chart = () => {
        if (!main) {
            return null;
        }

        if (main.err) {
            return <NoData err={main.err}/>;
        }

        const opt = {
            s_cl: obj_bool(cur_opt, "cl"),
            s_lcl: obj_bool(cur_opt, "lcl"),
            s_ucl: obj_bool(cur_opt, "ucl"),
            cl: get_f(cfg, "cl"),
            lcl: get_f(cfg, "lcl"),
            ucl: get_f(cfg, "ucl"),
            sl: get_f(cfg, "sl"),
            lsl: get_f(cfg, "lsl"),
            usl: get_f(cfg, "usl"),
        };

        const xdata = filterE("x", main, opt);
        const rdata = filterE("r", main, opt);
        const sdata = filterE("s", main, opt);
        const ndata = filterN(main);
        const gdata = filterG(main);
        const [col, row] = getData(main);
        const [head1, col1, head2, col2] = sumSpc(main, "xbar");

        return (
            <div className="mb-6">
                <div className="flex flex-row">
                    <div className="flex flex-col w-1/2">
                        <div className="ml-2 mt-2 text-base flex justify-center">{"Xbar" + loc("zw_248")}</div>
                        <Echart main={xdata} w={width / 2}/>
                        <div className="ml-2 mt-2 text-base flex justify-center">{"Xbar" + loc("zw_250")}</div>
                        <Echart main={sdata} w={width / 2}/>
                        <div className="ml-2 mt-2 text-2xl flex justify-center">{loc("zw_153")}</div>
                        <div className="flex justify-center">
                            <Echart main={ndata} width={width / 2}/>
                        </div>
                        <div className="flex flex-row">
                            <SumN main={main}/>
                        </div>
                    </div>
                    <div className="flex flex-col w-1/2">
                        <div className="ml-2 mt-2 text-base flex justify-center">{"Xbar" + loc("zw_249")}</div>
                        <Echart main={rdata} w={width / 2}/>
                        <div className="ml-2 mt-2 text-base flex justify-center">{loc("zw_251")}</div>
                        <Echart main={gdata} w={width / 2}/>
                        <div className="ml-2 mt-2 text-base flex">{loc("zw_158")}</div>
                        <Stable row={col1} head={head1}/>
                        <div className="ml-2 mt-2 text-base flex">{loc("zw_263")}</div>
                        <Stable row={col2} head={head2}/>
                    </div>
                </div>
                <MsgInfo msg={loc("zw_154")}/>
                <div className="mb-6">
                    <GridTable col={col} row={row} high={600}/>
                </div>
            </div>
        );
    };

    return (
        <MainView>
            <Title cfg={cfg} hcmd={hfind} hopt={hopt}/>
            <Chart/>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {XbarView};
